<?php
/**
 * TomatoCMS
 * 
 * LICENSE
 *
 * This source file is subject to the GNU GENERAL PUBLIC LICENSE Version 2 
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://www.gnu.org/licenses/gpl-2.0.txt
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@tomatocms.com so we can send you a copy immediately.
 * 
 * @copyright	Copyright (c) 2009-2010 TIG Corporation (http://www.tig.vn)
 * @license		http://www.gnu.org/licenses/gpl-2.0.txt GNU GENERAL PUBLIC LICENSE Version 2
 * @version 	$Id: add.phtml 5254 2010-08-31 09:36:19Z huuphuoc $
 * @since		2.0.0
 */
?>
<?php
$this->headTitle($this->translator('banner_add_page_title'));

$this->headLink()
        ->appendStylesheet($this->APP_STATIC_SERVER . '/js/jquery.ui/themes/base/jquery.ui.all.css')
        ->appendStylesheet($this->APP_STATIC_SERVER . '/js/jquery.ui/themes/base/jquery.ui.datepicker.css')
        ->appendStylesheet($this->APP_STATIC_SERVER . '/skins/admin/default/css/form.css');
;

$this->headScript()
        ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.json-2.3.min.js')
        ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.validate.min.js')
        ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.ui/jquery.ui.core.min.js')
        ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.ui/jquery.ui.widget.min.js')
        ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.ui/jquery.ui.datepicker.min.js');
?>

<?php $this->headStyle()->captureStart(); ?>
.uploadifyQueueItem { margin-left: 170px; }
<?php $this->headStyle()->captureEnd(); ?>

<div id="r-heading">
    <img src="<?php echo $this->APP_STATIC_SERVER . '/skins/admin/default/images/banner.png'; ?>" alt=""/>
    <span><a href="<?php echo $this->url(array(), 'ad_banner_list'); ?>"><?php echo $this->translator('banner_list_breadcrumb'); ?></a></span>
    <span><?php echo $this->translator('banner_add_breadcrumb'); ?></span>
</div>

<?php
$message = $this->flashMessenger();
if ($message) {
    ?>
    <div id="message"><ul><?php echo $message; ?></ul></div>
<?php } ?>

<form method="post" action="<?php echo $this->url(array(), 'ad_banner_add'); ?>" id="addBannerForm" name="addBannerForm">
    <div id="r-left" style="width: 45%; float: left;">   
        <div class="row">
            <label><?php echo $this->translator('banner_name'); ?>:</label>
            <input type="text" id="name" name="name" style="width: 300px" />
        </div>
        <div class="row">
            <label><?php echo $this->translator('banner_mode'); ?>:</label>
            <select id="mode" name="mode" style="width: 300px">
                <option value="">---</option>
                <option value="unique"><?php echo $this->translator('banner_mode_unique'); ?></option>
                <option value="share"><?php echo $this->translator('banner_mode_share'); ?></option>
                <option value="alternate"><?php echo $this->translator('banner_mode_alternative'); ?></option>
            </select>		
        </div>
        <div id="timeoutContainer" class="row" style="display: none">
            <label><?php echo $this->translator('banner_timeout'); ?>:</label>
            <input type="text" id="timeout" name="timeout" style="width: 90px" />
        </div>
        <div class="row">
            <label><?php echo $this->translator('banner_format'); ?>:</label>
            <select id="format" name="format" style="width: 250px">
                <option value="">---</option>
                <option value="image"><?php echo $this->translator('banner_format_image'); ?></option>
                <option value="flash"><?php echo $this->translator('banner_format_flash'); ?></option>
                <option value="text"><?php echo $this->translator('banner_format_text'); ?></option>
                <option value="html"><?php echo $this->translator('banner_format_html'); ?></option>
            </select>
        </div>
        <div id="fileFormat" class="row" style="display: none">
            <div class="grid_2 alpha"><label><?php echo $this->translator('banner_image'); ?>:</label></div>
            <div class="grid_8 omega">
                <div class="t_a_bottom">
                    <input type="text" name="imageUrl" id="imageUrl" style="width: 300px" />
                </div>
                <?php
                echo $this->helperLoader('upload')->uploader('ad', array('extension' => '*.jpg;*.jpeg;*.png;*.gif;*swf', 'multi' => false, 'auto' => true, 'simUploadLimit' => 1, 'sizeLimit' => 1024 * 1024 * 5, 'thumbnails' => 'none'), array('onComplete' => 'onUploadComplete'));
                ?>
            </div>
        </div>
        <div class="row" id="htmlFormat" style="display: none">
            <label><?php echo $this->translator('banner_code'); ?>:</label>
            <textarea name="code" id="code" style="width: 300px; height: 100px"></textarea>
        </div>
        <div class="row">
            <label><?php echo $this->translator('banner_text'); ?>:</label>
            <textarea name="text" id="text" style="width: 300px; height: 100px"></textarea>
        </div>
        <div class="row">
            <label><?php echo $this->translator('banner_click_url'); ?>:</label>
            <input type="text" id="clickUrl" name="clickUrl" style="width: 300px" />
        </div>
        <div class="row">
            <label><?php echo $this->translator('banner_status'); ?>:</label>
            <select name="status" style="width: 250px">
                <option value="">---</option>
                <option value="active"><?php echo $this->translator('banner_status_activated'); ?></option>
                <option value="inactive"><?php echo $this->translator('banner_status_not_activated'); ?></option>
            </select>
        </div>				
        <div class="row">
            <label><?php echo $this->translator('banner_target'); ?>:</label>
            <select name="target" style="width: 250px">
                <option value="">---</option>
                <option value="new_tab"><?php echo $this->translator('banner_target_new_tab'); ?></option>
                <option value="new_window"><?php echo $this->translator('banner_target_new_window'); ?></option>
                <option value="same_window"><?php echo $this->translator('banner_target_same_window'); ?></option>
            </select>
        </div>
        <div class="row">
            <label><?php echo $this->translator('banner_start_date'); ?>:</label>
            <input type="text" id="startDate" name="startDate" style="width: 100px" />
        </div>
        <div class="row">
            <label><?php echo $this->translator('banner_end_date'); ?>:</label>
            <input type="text" id="expiredDate" name="expiredDate" style="width: 100px" />
        </div>
        <div class="row">
            <label><?php echo $this->translator('banner_client'); ?>:</label>
            <select name="client" style="width: 300px">
                <option value="">---</option>
                <?php if (null != $this->clients) : ?>
                    <?php foreach ($this->clients as $client) : ?>
                        <option value="<?php echo $client->client_id; ?>"><?php echo $client->name; ?></option>
                    <?php endforeach; ?>
                <?php endif; ?>
            </select>
        </div>
    </div>
    <!-- Pages -->
    <div id="r-right" style="width: 45%; float: right">
        <h3><?php echo $this->translator('banner_pages'); ?></h3>
        <hr />
        <div id="linklist">
            <div class="ui_data_list_header">
                <div class="f-left" style="width:70%">
                    <div><?php echo $this->translator('banner_link'); ?></div>
                </div>
                <div class="" style="width:30%"><?php echo $this->translator('banner_zone'); ?></div>
            </div>
            <div id="links"></div>
        </div>


        <!-- Add link -->
        <div id="addLinks" class="row" style="margin-top: 30px;">
            <label><?php echo $this->translator('banner_link'); ?>:</label>
            <input type="text" id="link" name="link" style="width: 300px" />
        </div>

        <div class="row">
            <label><?php echo $this->translator('banner_zone'); ?>:</label>
            <select name="zone" id="zone" style="width: 200px">
                <option value="">---</option>
                <?php foreach ($this->zones as $zone) : ?>
                    <option value="<?php echo $zone->zone_id; ?>"><?php echo $zone->name; ?></option>
                <?php endforeach; ?>				
            </select>
        </div>

        <div class="row">
            <label>&nbsp;</label>
            <a style="padding: 5px 15px;" class="button" href="javascript: void(0);" id="addNewLink" ><span><?php echo $this->translator('banner_add_link'); ?></span></a>
        </div>

        <!-- Link Provider -->
        <?php
        /**
         * User can insert the link quickly by using Link Provider
         * @since 2.0.7
         */
        ?>
        <div class="row">
                <a href="javascript: void(0);" id="linkProviderToggle"><?php echo $this->translator('banner_link_provider_guide'); ?></a>
        </div>

        <div class="row" id="linkProvider" style="display: none">
            <?php
            /**
             * Add language switcher
             * @since 2.0.8
             */
            ?>
            <div class="row">
                <div class="grid_2 alpha">
                    <label><?php echo $this->translator('banner_language'); ?>:</label>
                </div>
                <div class="grid_8 omega">
                    <?php echo $this->languageSelector(array('jsCallback' => 'onSelectLanguage')); ?>
                </div>
            </div>

            <div class="row">
                <div class="translatable">
                    <?php echo $this->linkProvider(array('jsCallback' => 'selectLink')); ?>
                </div>
            </div>
        </div>

        <!-- Submit button -->
        <div class="row">
            <label>&nbsp;</label>
            <button class="button" type="button" id="addButton"><span><?php echo $this->translator('banner_add_save_button'); ?></span></button>
            <input type="hidden" name="linkItems" id="linkItems" />
        </div>
    </div>
</div>
</form>

<script type="text/javascript">
    /**
     * Upload handlers
     */
    function onUploadComplete(event, ID, fileObj, response, data) {
        var res = $.evalJSON(response);
        $('#imageUrl').attr('value', res.original.url);
    };

    /**
     * Handle selecting the link from Link Provider
     */
    function selectLink(route, href, title) {
        $('#link').val(href);
    };

    /**
     * Handle selecting language event
     * @since 2.0.8
     */
    function onSelectLanguage(language, label) {
        addZoneToLinkProvider();
    };

    /**
     * Show the zone selector inside Link Provider
     */
    function addZoneToLinkProvider() {
        $('#linkProvider').find('li').each(function() {
            var li   = $(this);
            var link = $(li).find('a:first');
            $(link).wrap($('<div/>').addClass('grid_7 alpha'));

            /**
             * Create a clone of zone selector
             */
            var zoneSelector = $('#zone').clone().change(function() {
                if ($(this).val() != '') {
                    addLink($(link).attr('route'), $(link).attr('href'), $(link).html(), {
                        id: $(this).val(),
                        name: $(this).find('option:selected').html() 
                    });
                }
            });
            $('<div/>').addClass('grid_3 omega').append($(zoneSelector)).appendTo(li);
        });	
    };
    /**
     * Handle selecting the zone inside Link Provider
     */
    function addLink(route, href, title, zone) {
        var div = $('<div/>').addClass('clearfix t_a_ui_data_list_content');

        $('<div/>').addClass('grid_7 alpha').append($('<a/>').attr('href', href).attr('route', route).html(title)).appendTo($(div));
        $('<div/>').addClass('grid_2').append($('<span/>').attr('zoneId', zone.id).html(zone.name)).appendTo($(div));
        $('<div/>').addClass('grid_1 omega').append($('<a/>').attr('href', 'javascript: void(0);').addClass('t_a_ui_helper_action').html('<?php echo addslashes($this->translator('banner_remove_link')); ?>').hide().click(function() {
            $(div).remove();
        })).appendTo($(div));

        $(div).hover(function() {
            $(div).find('a.t_a_ui_helper_action').show();
        }, function() {
            $(div).find('a.t_a_ui_helper_action').hide();
        });
	
        $('#links').append($(div));
    };

    $(document).ready(function() {
        /**
         * Create datepicker instances
         */
        $('#startDate').datepicker();
        $('#expiredDate').datepicker();
	
        /**
         * Switch mode handler
         */
        $('#mode').change(function() {
            if ($(this).val() == 'share') {
                $('#timeoutContainer').show();
            } else {
                $('#timeoutContainer').hide();
            }		
        });

        /**
         * Switch format handler
         */
        $('#format').change(function() {
            $('#fileFormat, #htmlFormat').hide();		

            switch ($(this).val()) {
                case 'image': 
                case 'flash':				
                    $('#fileFormat').show();
                    break;
                case 'text': 
                case 'html':
                    $('#htmlFormat').show();
                    break;
            }	
        });
	
        /**
         * Toggle Link Provider
         */
        $('#linkProviderToggle').click(function() {
            $('#linkProvider').toggle();
        });

        addZoneToLinkProvider();

        /**
         * Add new link
         */
        $('#addNewLink').click(function() {	
            if ($('#link').val() != '' && $('#zone').val() != '') {
                addLink('', $('#link').val(), $('#link').val(), {
                    id: $('#zone').val(),
                    name: $('#zone').find('option:selected').html() 
                });
            }	
        });
	
        /**
         * Validate form
         */
        $.validator.addMethod('endDate', function() {
            var startDate = $('#startDate').val();
            var endDate = $('#expiredDate').val();
            return startDate == '' || endDate == '' || Date.parse(startDate) <= Date.parse(endDate);
        });
        $('#addBannerForm').validate({
            rules: {
                name: {
                    required: true
                },
                format: {
                    required: true
                },
                mode: {
                    required: true
                },
                timeout: {
                    number: true
                },
                expiredDate: {
                    endDate: true
                },
                target: {
                    required: true
                }
            },
            messages: {
                name: {
                    required: "<?php echo $this->translator('banner_name_required'); ?>"
                },
                format: {
                    required: "<?php echo $this->translator('banner_format_required'); ?>"
                },
                mode: {
                    required: "<?php echo $this->translator('banner_mode_required'); ?>"
                },
                timeout: {
                    number: "<?php echo $this->translator('banner_timeout_number'); ?>"
                },
                expiredDate: {
                    endDate: "<?php echo $this->translator('banner_end_date_greater_than_start_date'); ?>"
                },
                target: {
                    required: "<?php echo $this->translator('banner_target_required'); ?>"
                }
            }
        });

        /**
         * Submit form handler
         */
        $('#addButton').click(function() {
            /**
             * Assign value for hidden items
             */
            var items = new Array();
            $('#links .t_a_ui_data_list_content').each(function() {
                var link = $(this).find('a:first');
                items.push({
                    route: $(link).attr('route'),
                    page_title: $(link).html(),
                    page_url: $(link).attr('href'),
                    zone_id: $(this).find('span:last').attr('zoneid')
                });
            });

            $('#linkItems').val($.toJSON(items));

            $('#addBannerForm').submit();
        });	 
    });
</script>
